/*
 * slider.js
 * 主要以slide序号-index为主要定位锚点
 * 通过index来计算每次滑动后slide应该定位到的位置
 * 未触发swipe事件的滑动操作由move函数完成
 */
function Slider(el, options) {
  // 默认参数
  var defaultsOption = {
    initIndex: 1,
    animationDuration: 300,
    hasPagination: false,
  }
  // 对接收到的空参数进行处理，使其等于默认参数
  this.options = {}
  this.options.hasPagination =
    typeof options.hasPagination !== undefined
      ? options.hasPagination
      : defaultsOption.hasPagination
  this.options.initIndex =
    typeof options.initIndex !== undefined
      ? options.initIndex
      : defaultsOption.initIndex
  this.options.animationDuration =
    typeof options.animationDuration !== undefined
      ? options.animationDuration
      : defaultsOption.animationDuration

  // 将接收到参数挂在到类上,以便后续调用
  this.el = el
  // 获取slide-items的容器元素
  this.itemsContainer = el.querySelector('.items-container')
  this.items = this.itemsContainer.children
  this.itemsLength = this.items.length
  this.paginationContainer = null

  // 处理当前index值,避免用户传入的值过大或过小导致报错
  this.index = this._indexFilter(this.options.initIndex)
  console.log(this.index)

  // 获取视窗的宽度, 也等于一个图片的宽度，以下会当做图片宽度处理
  this.viewWidth =
    document.documentElement.getBoundingClientRect().width || window.innerWidth
  this.itemsWidth = this.viewWidth * (this.itemsLength - 1)

  // a1 接受初始化index参数，初始化图片位置
  this.currentX = -this.index * this.viewWidth

  // a2 接受初始化index参数，完成初始化位置设置
  this.move(0)

  // 初始化pagination
  if (this.options.hasPagination) {
    this._createPagination()
    this._setPaginationActive()
  }
}

// 处理slider的触摸跟踪滑动
Slider.prototype.move = function (moveX) {
  this.itemsContainer.style.transition = `transform 0s`
  this.currentX = -this.index * this.viewWidth
  var distance = moveX + this.currentX
  this.itemsContainer.style.transform = `translate3d(${distance}px, 0, 0)`
}
// 向前一张
Slider.prototype.goNext = function () {
  this.moveToIndex(this.index + 1)
}

// 向后一张
Slider.prototype.goPrev = function () {
  this.moveToIndex(this.index - 1)
}

Slider.prototype.moveToIndex = function (index) {
  this.index = this._indexFilter(index)
  this.itemsContainer.style.transition = `transform ${this.options.animationDuration}ms`
  this.currentX = -this.index * this.viewWidth
  this.itemsContainer.style.transform = `translate3d(${this.currentX}px, 0, 0)`
  setTimeout(function () {
    this.itemsContainer.style.transition = `transform 0s`
  }, 300)

  if (this.options.hasPagination) {
    this._setPaginationActive()
  }
}

// 创建pagination的DOM元素
Slider.prototype._createPagination = function () {
  // <div class="pagination-container" id="paginationContainer"></div>
  var paginationContainer = document.createElement('div'),
    innerHtml = ''
  paginationContainer.className = 'pagination-container'
  for (var i = 0; i < this.itemsLength; i++) {
    innerHtml += `<span class="pagination" index=${i}></span>`
  }
  paginationContainer.innerHTML = innerHtml
  this.el.appendChild(paginationContainer)
}

// 使对应pagination显示未选中状态
Slider.prototype._setPaginationActive = function () {
  var paginationBox = document.getElementsByClassName('pagination-container')
  this.paginationContainer = paginationBox[0]
  for (var i = 0; i < this.itemsLength; i++) {
    this.paginationContainer.childNodes[i].classList.remove('pagination-active')
  }
  console.log(this.index)
  this.paginationContainer.childNodes[this.index].className =
    'pagination pagination-active'
}

// 接收到index后进行处理，大于最大值则返回0，小于0则置为最大值
Slider.prototype._indexFilter = function (index) {
  index = index == undefined ? this.index : index
  index =
    index < 0 ? this.itemsLength - 1 : index > this.itemsLength - 1 ? 0 : index
  return index
}
